<template>
  <div class="botloading">
    <div class="wordpress" ref="press"></div>
  </div>
</template>

<script>
export default {
  name: "botloading",
  data() {
    return {};
  },
  watch: {
    $route: "getPath"
  },
  computed: {},
  created() {},
  mounted() {
    var that = this;
    // console.log(this.$refs);
    this.$refs.press.style.display = "block";
    setTimeout(function() {
      that.$refs.press.style.display = "none";
    }, 500);
  },
  methods: {
    getPath() {
      var that = this;
      // console.log(this.$refs);
      this.$refs.press.style.display = "block";
      setTimeout(function() {
        that.$refs.press.style.display = "none";
        // console.log(that.$route.path);
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
@keyframes wordpress {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
}
.wordpress {
  height: 6px;
  margin: 1px 2px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // background-color: transparent;
  background-color: blue;
  display: none;
  animation: wordpress 0.5s ease-out;
}
</style>
